<template>
  <div class="order-confirm">
    <!-- 1.标题区域 -->
    <order-header title="订单详情">
      <span slot="desc">温馨提示： 收到货后请确认喔~</span>
    </order-header>
    <!-- 2.内容区域 -->
    <div class="container">
      <!-- 收货地址区域 -->
      <div class="address">
        <h2>收货地址</h2>
        <ul class="list">
          <li
            class="item"
          >
            <div class="name">{{ orderDetail[0].consigneeName }}</div>
            <div class="phone">{{ orderDetail[0].consigneePhone }}</div>
            <div class="pos">
              {{orderDetail[0].consigneeAddress}}
            </div>
          </li>
        </ul>
      </div>
      <!-- 商品列表区域 -->
      <div class="goods">
        <h2>商品</h2>
        <ul class="goodslist">
          <li :class="['item',{'activeaddress': index === curIndex}]" v-for="(item, index) in orderDetail" :key="index" @click="checkOrder(index)">
            <div class="goods-img">
              <img :src="item.goods.coverImg" alt="" />
            </div>
            <div class="goods-name">{{ item.goods.goodsName }}</div>
            <div class="goods-desc">{{ item.goods.describeTxt }}</div>
            <div class="goods-count">
              {{ item.goods.sellPrice }}x{{ item.amount }}
            </div>
            <div class="goods-price">{{ item.totalMoney }}元</div>
          </li>
        </ul>
      </div>
      <!-- 配送方式区域 -->
      <div class="post">
        <h2>配送方式</h2>
        <span>包邮</span>
      </div>
      <!-- 发票区域 -->
      <div class="fapiao">
        <h2>发票</h2>
        <span>电子发票</span>
        <span>个人</span>
      </div>
      <!-- 结算区域 -->
      <div class="jiesuan">
        <div class="totalcount">
          当前商品件数：<span>{{ curOrder.amount }}件</span>
        </div>
        <div class="discount">优惠活动：<span>0元</span></div>
        <div class="other">运费：<span>0元</span></div>
        <div class="totalpay">
          当前商品总额：<span>{{ curOrder.totalMoney
 }}元</span>
        </div>
      </div>
      <!-- 返回购物车和结算按钮区域 -->
      <div class="btn">
        <div class="backbtn" @click="backToOrderList">返回订单列表</div>
        <!-- <div class="paybtn" @click="orderSubmit">去结算</div> -->
        <div class="backbtn" v-for="(item, index) in orderDetail" :key="index" v-show="curIndex===index">
          <el-button type="warning" v-if="item.status === 2" @click="toComment(item)">去评价</el-button>
        <el-button v-else @click="detailControl(item)" type="warning">{{item.status ? '确认收货' : '去支付'}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderHeader from "components/orderheader/OrderHeader";
import Model from "components/model/Model";
import { mapState } from 'vuex';

export default {
  name: "orderDetail",
  components: {
    OrderHeader,
    Model,
  },
  inject: ['reload'],
  data() {
    return {
      curOrder: {},
      curIndex: 0,
      orderDetail: [],
      curGood: 0,
      curOrderId: this.$route.query.id
    };
  },
  computed: {
    ...mapState(['user', 'curGoods']),
    // 购物车中选中需要结算的商品列表
    // toPayGoodsList() {
    //   let arr = [];
    //   arr = this.cartList.filter((item) => {
    //     return item.productSelected == true;
    //   });
    //   return arr;
    // },
  },
  mounted() {
    this.getOrderDetail()
  },
  methods: {
    /**
     * 切换商品
     */
    checkOrder (index) {
      this.curIndex = index
      this.curOrder = this.orderDetail[index]
    },
    /**
     * 返回订单列表
     */
    backToOrderList () {
      this.$router.push({
        path: '/order/list'
      })
    },
    /**
     * 去评论
     */
    toComment (order) {
      this.$router.push({
        path: `/detail/${order.goods.id}`,
        query: {
          from: 'order'
        }
      })
    },
    /**
     * 确认收货 || 去支付
     */
    detailControl (item) {
      if (item.status === 1) {
        let params = {
          orderSerialNumber: item.orderSerialNumber,
          status: 2
        }
        this.$api.cart.getGood(params).then(res => {
          if (res.code === 200) {
            this.$router.replace({
            path: '/order/detail',
            query: {
              orderId: item.orderSerialNumber,
              id: item.id
            }
          })
          this.reload()
          }
        })
      } else {
        this.$router.push({
          path: "/order/pay",
          query: {
            orderId: item.orderSerialNumber,
          },
        });
      }
    },
    /**
     * 获取订单详情
     */
    getOrderDetail () {
      let query = {
        orderSerialNumber: this.$route.query.orderId
      }
      this.$api.cart.getOrderDetail(query).then(res => {
        if (res.code === 200) {
          this.orderDetail = res.data
          this.curOrder = res.data[0]
          this.curGood = res.data[0].id
        }
      })
    }
  }
}
</script>

<style scoped>
/* 表单区域样式 */
.add-form .item {
  margin-bottom: 15px;
  font-size: 14px;
}
.add-form .item input {
  width: 270px;
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  outline: none;
}
.add-form .item select {
  margin-right: 15px;
  border: 1px solid #e5e5e5;
  width: 90px;
  height: 30px;
  line-height: 30px;
  color: #666;
}
.add-form .item input:first-child {
  margin-right: 20px;
}
.add-form .item textarea {
  width: 98%;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  resize: none;
  line-height: 30px;
}

/* 确认订单外层样式 */
.order-confirm {
  background-color: #fff;
}
/* 包裹区域 */
.container {
  margin-top: 20px;
  padding: 30px 0;
  box-sizing: border-box;
  background-color: #fff;
}

/* 结算区域样式 */
.jiesuan {
  margin-top: 20px;
  text-align: right;
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 20px;
}
.jiesuan div {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.jiesuan div span {
  display: inline-block;
  color: #ff6600;
  width: 150px;
}
.totalpay {
  margin-top: 15px;
}
.totalpay span {
  font-size: 24px;
  font-weight: 600;
}
/* 底部确认订单样式 */
.btn {
  margin-top: 30px;
  text-align: right;
}
.backbtn {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  color: #666;
  cursor: pointer;
  margin-right: 10px;
}
.paybtn {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #ff6600;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
/* 地址 发票样式 */
.post {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.post h2 {
  margin-right: 40px;
}
.post span {
  margin-right: 5px;
  color: #ff6600;
}
.fapiao {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.fapiao h2 {
  margin-right: 75px;
}
.fapiao span {
  margin-right: 5px;
  color: #ff6600;
}
/* 商品展示列表样式 */
.goods {
  margin-top: 20px;
}
.goods h2 {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 5px;
}
.goods .item {
  height: 100px;
  border-bottom: 2px solid #e5e5e5;
  line-height: 100px;
  display: flex;
  align-items: center;
  position: relative;
}
.goods-img {
  width: 60px;
  margin: 0 10px;
}
.goods-img img {
  width: 100%;
  position: relative;
  top: -5px;
}
.goods-name {
  font-size: 18px;
  margin-right: 10px;
}
.goods-desc {
  font-size: 18px;
}
.goods-count {
  font-size: 18px;
  width: 80px;
  position: absolute;
  left: 900px;
}
.goods-price {
  font-size: 18px;
  color: #ff6600;
  white-space: nowrap;
  position: absolute;
  right: 50px;
}

/* 地址展示区域样式 */
.address h2 {
  padding: 30px 0 20px 0;
}
.address .list {
  display: flex;
  flex-wrap: wrap;
}
.address .item {
  width: 270px;
  height: 180px;
  border: 2px solid #e5e5e5;
  margin-right: 15px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.activeaddress {
  border: 3px solid #ff6600 !important;
}
.addnew {
  width: 270px;
  height: 180px;
  border: 2px solid #e5e5e5;
  margin-right: 15px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #dddcdd;
  cursor: pointer;
}
.addnew .icon-add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url("/imgs/icon-add.png") no-repeat center;
  background-size: 15px;
  background-color: #dddcdd;
  margin-bottom: 15px;
}
.item .name {
  font-size: 18px;
}
.item .phone {
  font-size: 14px;
  margin-top: 20px;
}
.item .pos {
  font-size: 14px;
}
.item .control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 230px;
  bottom: 10px;
}
.item .control span.delete {
  width: 20px;
  height: 20px;
  background: url("/imgs/icon-close.png") no-repeat center;
  background-size: 20px;
  cursor: pointer;
}
.item .control span.setting {
  width: 20px;
  height: 20px;
  background: url("/imgs/icon-setting.png") no-repeat center;
  background-size: 20px;
  cursor: pointer;
}
</style>
